<template>
  <div>
    <my-header></my-header>
    <div id="content" class="insert">
      <!--1 轮播图代码区域 -->
      <carousel></carousel>
      <!--2 二级网页跳转区域 -->
      <div class="home_title">
        <div
          v-for="(modelvalue, m) of modelarr"
          :key="m"
          :style="`background: url(${modelvalue.background_img}) no-repeat;background-size: 270px 140px`"
        >
          <router-link :to="`/picture/${modelvalue.Psid}/${1}`">{{
            modelvalue.model1
          }}</router-link>
        </div>
      </div>
      <!--3 主体内容区域 -->
      <div id="content_middle">
        <!--3.2 左侧主体内容区域 -->
        <div id="con_left">
          <div class="con_left_con" v-for="(elem, li) of newshuju" :key="li">
            <router-link :to="`/picturedetails/${elem.Psid}/${elem.id}`">
              <img class="con_left_img" :src="elem.homeimgurl" alt="" />
            </router-link>
            <div>
              <span>
                <router-link
                  class="con_left_details"
                  :to="`/picturedetails/${elem.Psid}/${elem.id}`"
                  >{{ elem.details }}</router-link
                >
              </span>
              <span class="con_left_count">{{ elem.imgurlcount }}张</span>
            </div>
            <div>
              <span>
                <router-link
                  class="con_left_summarize"
                  :to="`/picturedetails/${elem.Psid}/${elem.id}`"
                >
                  <img
                    src="https://qnm.hunliji.com/o_1dd2jt52d1tebdn0kd61tdc1qd3e.png"
                    alt=""
                  />
                  <i>{{ elem.title }}</i>
                </router-link>
              </span>
              <span>
                <router-link class="con_left_title" to="#">{{
                  elem.author
                }}</router-link>
              </span>
            </div>
          </div>
        </div>
        <!--3.3 右侧标签跳转栏 -->
        <div id="con_right">
          <div>
            <div id="con_right_top">
              <h3>猜你想看</h3>
              <div>换一批</div>
            </div>
            <div id="con_right_content">
              <div v-for="(modelvalue, i) of modelarr" :key="i">
                <ul>
                  <h4>{{ modelvalue.model1 }}</h4>
                  <li v-for="(labelvalue, n) of labelarr[i]" :key="n">
                    <router-link
                      :to="`/picturelabel/${i}/${labelvalue.Sdid}`"
                      >{{ labelvalue.title }}</router-link
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<style scoped>
/*0.1 cssreset页面初始化 清除元素的内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 15px;
}
/*0.2 声明主体样式 */
body {
  /* 宽度占浏览器可视区域的高度 */
  width: 100%;
  background-color: #ffffff;
}
/*0.3 声明总内容区域样式(无效) */
.test {
  width: 100%;
  height: 500px;
  /* background:#d1d; */
}
#content {
  width: 1200px;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
}
/*0.4 声明a标签文字颜色与去除下划线 */

a {
  color: #000;
  text-decoration: none;
}
/*0.5声明页眉区域内a标签在鼠标悬浮状态下的样式 */
a:hover {
  color: #ff0000;
  box-sizing: border-box;
}
/*0.6 声明外边距溢出样式 */
.insert::before {
  content: "";
  display: block;
}
/*0.7 声明高度坍塌样式 */
.insert::after {
  content: "";
  display: block;
  clear: both;
}
/* 3.声明链接模块格式 */
.home_title {
  width: 100%;
  margin: 20px auto;
  padding: 0px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.home_title div {
  width: 270px;
  line-height: 140px;
  font-size: 25px;
  font-weight: bold;
  /* background:#5a5a5a url(http://qnm.hunliji.com/o_1carplmvll901p4411rekpuotia.jpg) no-repeat; */
  /* background-size: 270px 140px; */
}
.home_title div:nth-child(2) {
  /* background:#5a5a5a url(http://qnm.hunliji.com/o_1carplmvl1urfk90cto1oq8us8b.jpg) no-repeat; */
  /* background-size: 270px 140px; */
}
.home_title div:nth-child(3) {
  /* background:#5a5a5a url(http://qnm.hunliji.com/o_1carplmvl3352n8168o1ff5146kc.jpg) no-repeat; */
  /* background-size: 270px 140px; */
}
.home_title div:last-child {
  /* background:#5a5a5a url(http://qnm.hunliji.com/o_1carplmvl16991cflbpt1l2c9jod.jpg) no-repeat; */
  /* background-size: 270px 140px; */
}
.home_title a {
  display: block;
  width: 270px;
  height: 140px;
  color: #fff;
  opacity: 0.9;
  text-align: center;
}
.home_title a:hover {
  background-color: rgb(157, 156, 156);
  opacity: 0.7;
}
/* 4.声明中间内容区域样式 */
#content_middle {
  width: 1200px;
  margin: 0 auto;
}
#content_middle,
.con_left_con div,
.con_left_con div span span {
  display: flex;
  justify-content: space-between;
}
#con_left {
  width: 895px;
}
#con_left:after {
  content: "";
  display: block;
  clear: both;
}
#con_right > div,
.con_left_con {
  padding-top: 10px;
  border: 1px solid #dddede;
}
#con_right {
  width: 270px;
  color: rgb(66, 63, 63);
  margin: 0px;
}
#con_right:after {
  content: "";
  display: block;
  clear: both;
}
.con_left_con {
  /* height: 265px; */
  font-size: 10px;
  margin-left: 36px;
  margin-bottom: 10px;
  padding-top: 0px;
  padding-bottom: 10px;
  float: left;
}
.con_left_con > a {
  display: block;
  margin-bottom: 5px;
}
.con_left_con:nth-child(3n + 1) {
  margin-left: 0px;
  clear:both;
}
.con_left_con div {
  width: 260px;
  height: 30px;
  padding: 5px 10px;
  flex-direction: row;
  align-items: center;
}
.con_left_con img {
  width: 270px;
}
.con_left_con span img {
  width: 16px;
  height: 16px;
  margin-bottom: 0px;
}
.con_left_con span:first-child {
  text-align: left;
  display: block;
  width: 150px;
  line-height: 16px;
  /* 设置溢出隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.con_left_con span:last-child {
  width: 100px;
  color: #5a5a5a;
  text-align: right;
  padding-right: 5px;
}
.con_left_con span:last-child a {
  color: #5a5a5a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.con_left_con div:not(:last-child) span:first-child a {
  font-size: 13px;
  color: #272727;
  overflow-x: visible;
}
.con_left_con div span span {
  flex-direction: row;
  flex-wrap: nowrap;
}
.con_left_con i {
  color: #4773ac;
  /* background: rgb(229, 231, 242); */
}

/* ------------------------------------------------- */
.con_left_con div:last-child span:last-child {
  width: 100%;
  height: 20px;
  line-height: 15px;
  overflow: hidden;
  /* border: 1px solid red; */
}
/* ---------------------------------- */
#con_right > div div:first-child {
  /* border: 2px solid #FF0000; */
  display: flex;
  justify-content: space-around;
}
#con_right span:first-child {
  font-size: 20px;
}
#con_right_top {
  justify-content: space-between;
  padding: 0px 20px 0px 10px;
}
#con_right_top h3 {
  width: 80px;
}
#con_right_top > div {
  cursor: pointer;
  padding-left: 65px;
  width: 110px;
  height: 20px;
  font-size: 14px;
  color: #000;
  background: url(https://qnm.hunliji.com/o_1dlh13vt21559180410v8a1gnne.png)
    center no-repeat;
  background-size: 18px 14px;
}
#con_right_top > div:hover {
  color: red;
  background: url(https://qnm.hunliji.com/o_1dogf5n9o17iapqijgpb9118gr9.png)
    center no-repeat;
  background-size: 18px 14px;
}
#con_right_content ul {
  margin: 10px 10px 10px 25px;
  padding-top: 10px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#con_right_content ul h4 {
  margin-bottom: 10px;
  margin-right: 150px;
}
#con_right_content li {
  width: 105px;
  height: 18px;
  font-size: 12px;
  margin: 5px 5px 5px 0px;
  text-align: left;
  line-height: 16px;
  word-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#con_right_content ul a {
  text-align: left;
  padding: 1px 2px;
  color: rgb(81, 77, 77);
}
#con_right a:hover {
  color: red;
}
/* 5.声明页面底部链接区域样式 */
#footer_0 {
  background: #2d2d2d;
  padding: 20px;
}
#footer {
  width: 1200px;
  color: #fff;
  /* border: 2px solid #fd0d31; */
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

#footer ul {
  width: 120px;
  font-size: 15px;
  list-style: none;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
#footer div:nth-child(4) > ul {
  width: 70px;
}
#footer div:nth-child(5) > ul {
  width: 70px;
}
#footer li {
  margin: 2px 5px;
}
#footer a {
  color: #cecece;
  font-size: 10px;
}
#footer img {
  width: 100px;
  height: 100px;
  margin-top: 10px;
}
/* 6.声明页脚信息 */
#footer_last {
  /* border: 2px solid #dd0; */
  color: #fff;
  font-size: 10px;
  background-color: #161616;
  text-align: center;
  padding: 20px;
}
#footer_last span {
  width: 800px;
  margin-bottom: 10px;
}
#footer_last img {
  width: 15px;
  height: 15px;
}
#footer_last a {
  color: white;
}
#footer div:last-child p img {
  width: 25%;
  height: 25%;
}
#footer div:last-child p {
  position: relative;
}
.footer_img_span {
  width: 200px;
  height: 100px;
  display: none;
}
#footer div:last-child p > img:first-child:hover .footer_img_span {
  display: block;
  position: absolute;
}
/* @import url(/css/bootstrap.css); */
/* ------------------------------------------------------------------------------------ */
/* <!-- ------------------------------------------- --> */
</style>

<script>
import axios from "axios";
import carousel from "../components/sukai/carousel.vue";
// 将vuex的store中的变量,函数,异步函数执行引入(其中:变量需在computed中结构,方法需在methods中解构)
import { mapState, mapMutations, mapActions } from "vuex";
// 将封装的ajax请求的函数执行引入(在vue实例中使用时直接使用不用加this)
import { Alldetail1, Alldetail } from "../api/sukai";
// 将自定义封装的添加图片张数的函数执行引入(在vue实例中直接使用不用加thiss)
import { addimgcount } from "../callback/sukai";

export default {
  data() {
    return {
      //方法1 请求方式加载数据
      page: 1, //设置加载页码,首屏默认为1
      labelarr: [], //右侧搜索标签栏列表数据
      modelarr: [], //模块名称数据数组
      newshuju: [], //通过新数据表查询数据
      Switch: true, //懒加载开关
      // ------------------------------------------------------------------
      // 方法2 采用vuex存储全局数据,重新加载数据
      store_shuju: [], //获取到 的store中的详情总数据(由于active异步问题造成this.alldetail无法直接获取参数,暂时通过内置回调函数将参数取出)
      vx_shuju: [], //主体区域组件加载所用数据
      vx_offset: 1, //当前页码,初始为1
      vx_pagecount: 20, //设置每页显示数据总量
      vx_offsetcount: "", //分页页码总数
      vx_lazy: true, //懒加载开关
      // ceshishuzu:[{name:1,homeimgurl:"homeimgurl",imageurl1:'imageurl1'},{name:2,homeimgurl:"homeimgurl",imageurl2:'imageurl2'}]
    };
  },
  computed: {
    //结构store.state参数
    ...mapState(["alldetail"]),
  },
  watch: {
    // 监听变量alldetail的变化(当期变化时执行本页面数据的重新赋值,避免因页面加载时初始值造成页面数据不跟新问题)
    alldetail(newData, oldData) {
      // console.log("watch");
      if (!newData) return "";
      this.store_shuju = this.alldetail;
      // console.log(this.store_shuju);
      this.loadvx_shuju(1);
      // this.$forceUpdate()
    },
  },
  methods: {
    //解构store.mutation,store.actions中的方法
    ...mapActions(["loadalldetail"]),
    ...mapMutations(["setAlldetail"]),
    //获取详情数据表总数据
    async loadAlldetail() {
      const result1 = await Alldetail("/picturedetail", "");
      // console.log(Alldetail, Alldetail1);
      // const result = await Alldetail1("/picturedetail");
      // console.log(result1);
    },
    //-----------------------------------------------------------------
    // 方法1 vuex请求加载数据全局使用
    //0.1 加载页面显示主体区域参数
    loadstore_shuju(storeshuju) {
      this.store_shuju = storeshuju;
      // console.log(this.store_shuju);
    },
    loadvx_shuju(offset) {
      this.vx_shuju = this.store_shuju.slice(
        offset,
        offset + this.vx_offsetcount
      );
      // console.log(this.vx_shuju);
      // console.log(this.alldetail)
    },
    // ------------------------------------------------------------------
    // 方法2 多次请求加载数据方式
    // 0.  新数据表加载函数(添加了判断img数量的循环(考虑会不会影响加载效率))
    loadimgcontent() {
      this.axios.get("/picture/picturedetail", {
          params: { page: this.page },
        })
        .then((result) => {
          this.newshuju = result.data;
          // console.log("新数据表的数据为",this.newshuju);
          this.page += 1;
          // 判断添加imgurlcount属性
          addimgcount(this.newshuju);
        });
    },
    // 1.  对首页数据进行滚动事件判断懒加载请求数据
    lazyload() {
      //可见区域高度
      var seeHeight = document.documentElement.clientHeight; //获取可见区域高度
      var scrollTop =
        document.documentElement.scrollTop ||
        document.documentElement.scrollTop; //获取滚动条滚过距离
      var a = seeHeight + scrollTop; //获取可见区域高度+滚动条滚动距离之和
      var b = document.body.scrollHeight; //获取完整文档的高度
      // console.log(b);
      if (a > b - 50) {
        if (this.Switch == true) {
          this.Switch = false;
          // console.log(b,a,b-a,"可见区域高度:",seeHeight,"滚动条滚动:",scrollTop);
          // console.log("开始请求数据");
          setTimeout(() => {
            this.axios.get("/picture/picturedetail", {
                params: { page: `${this.page}` },
              })
              .then((result) => {
                this.page += 1;
                this.newshuju = this.newshuju.concat(result.data);
                // 判断添加imgurlcount属性
                addimgcount(this.newshuju);
                this.Switch = true;
                // console.log("数据更新完成");
              });
          }, 3000);
        }
      }
    },
    // 2.  首屏加载右侧搜索标签栏标签头以及标签列表数据
    loadsearchlabel() {
      // var arr=[];
      this.axios.get("/picture/picsearchlabel2").then((result) => {
        for (var k in result.data) {
          for (var i in k) {
            this.axios
              .get("/picture/picsearchlabel", {
                params: {
                  Psid: `${k[i]}`,
                },
              })
              .then((results) => {
                // console.log(results.data, this.labelarr);
                this.labelarr.push(results.data);
                // console.log(this.labelarr[0][0].Psid)
              });
          }
        }
      });
      this.axios.get("/picture/model").then((result) => {
        this.modelarr = result.data;
        // console.log("这是模块数据表", this.modelarr);
      });
    },
  },
  created() {
    this.loadalldetail(this.loadstore_shuju);
    //测试封装增加imgcount函数
    // addimgcount(this.ceshishuzu)
    // console.log(this.ceshishuzu)
  },
  mounted() {
    document.title="婚礼美图"
    // console.log("进入挂载阶段");
    // 0. 挂载完成后调用加载主体内容区域数据函数
    this.loadimgcontent();
    // 1. 挂载完成阶段调用加载标签函数
    this.loadsearchlabel();
    // 2. 对滚动时间设置监听,执行懒加载函数
    this.$nextTick(function () {
      window.addEventListener("scroll", this.lazyload);
    });
    this.loadAlldetail();
  },
  components: { carousel },
};
</script>